<template>
  <div class="app-main-content">
    <div class="top-btns-area">
      <div class="left-btns">
        <el-row class="btns-area">
          <div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              :disabled="!userNum"
              @click="handleAdd"
            >
              新增
            </el-button>
            <el-button
              type="danger"
              :loading="delBtnLoading"
              icon="el-icon-delete"
              :disabled="!(userNum && selected.length)"
              @click="handleDeleteAll"
            >
              删除
            </el-button>
          </div>
        </el-row>
      </div>
      <div class="right-btns">
        <query class="query-form" :options="searchOptions" @query="onSearch" />
      </div>
    </div>
    <!-- 字段模糊查询 -->
    <scmsa-table
      v-loading="tableLoading"
      class="margin-top-12"
      :data="tableData"
      :column="bankInfoColumn"
      border
      align="center"
      :pagination="true"
      :height="tableTopHeight"
      :current-page="pageing.pageNum"
      :page-size="pageing.pageSize"
      :total="totalPage"
      @size-change="handlePageSizeChange"
      @pagination-current-change="handlePageCurrentChange"
      @selection-change="handleSelectionChange"
    />
    <!-- 添加/修改 -->
    <add ref="add" :user-num="userNum" @appendData="appendData" />
  </div>
</template>
<script>
import { bankInfoApi } from '../api'
import query from '../query.vue'
import add from './create.vue'
export default {
  name: 'BankInfoIndex',
  components: {
    add,
    query,
  },
  data() {
    return {
      userNum: null, // 主表关联字段
      totalPage: 0,
      fileData: [],
      problemTitleOptions: [],
      difficultylevelOptions: [],
      problemTypeOptions: [],
      stateOptions: [],
      action: 'add',
      loading: false,
      tableLoading: false,
      delBtnLoading: false, // 删除按钮loading
      selected: [], // 复选框选中数据
      queryForm: null,
      pageing: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
    }
  },
  computed: {
    tableTopHeight() {
      return (
        this.$store.state.settings &&
        this.$store.state.settings.tableHeight * 0.5 - 48
      )
    },
    bankInfoColumn() {
      return [
        {
          type: 'selection',
          width: 55,
          align: 'center',
        },
        {
          prop: 'userNum',
          label: '用户/供应商代码',
          render: (h, params) => {
            return h(
              'span',
              {
                style: {
                  color: '#1890ff',
                  cursor: 'pointer',
                },
                on: {
                  click: (e) => {
                    console.log(params.row)
                  },
                },
              },
              params.row.chineseAddress
            )
          },
        },
        { prop: 'accountSeqNum', label: '帐号序码', showOverflowTooltip: true },
        { prop: 'accountNum', label: '帐号', showOverflowTooltip: true },
        { prop: 'bankName', label: '银行代码', showOverflowTooltip: true },
        {
          prop: 'bankBranchName',
          label: '银行及分支机构名称',
          showOverflowTooltip: true,
        },
        { prop: 'activeMark', label: '有效标志', showOverflowTooltip: true },
        { prop: 'accountUsage', label: '帐号用途', showOverflowTooltip: true },
        {
          prop: 'lastUpdateId',
          label: '最后更新人工号',
          showOverflowTooltip: true,
        },
        {
          prop: 'lastUpdatePerson',
          label: '最后更新人姓名',
          showOverflowTooltip: true,
        },
        {
          prop: 'lastUpdateTime',
          label: '最后更新人姓名',
          showOverflowTooltip: true,
        },
        {
          label: '操作',
          render: (h, params) => {
            return h('div', [
              h(
                'el-button',
                {
                  props: {
                    type: 'text',
                    size: 'small',
                    loading: false,
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.handleEdit(params)
                    },
                  },
                },
                '修改'
              ),
              h(
                'el-button',
                {
                  props: {
                    type: 'text',
                    size: 'small',
                    loading: false,
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params)
                    },
                  },
                },
                '删除'
              ),
            ])
          },
        },
      ]
    },
    searchOptions() {
      return [
        {
          value: 'accountSeqNum',
          key: 'accountSeqNum',
          label: '账号序码',
          type: 'input',
          placeholder: '请输入',
        }
      ]
    },
  },
  mounted() {
    this.$parent.$parent.$parent.$on('clickRow', (userNum) => {
      this.userNum = userNum
      if (userNum) {
        this.getList()
      } else {
        this.tableData = []
        this.totalPage = 0
      }
    })
  },
  methods: {
    async getList() {
      this.tableLoading = true
      const data = await bankInfoApi.getList({
        size: this.pageing.pageSize,
        page: this.pageing.pageNum,
        userNum: this.userNum,
        ...this.queryForm,
      })
      this.tableLoading = false
      this.tableData = data.data
      this.totalPage = data.total
    },
    // 每页条数发生改变时返回值
    handlePageSizeChange(v) {
      this.pageing.pageSize = v
      this.getList()
    },
    // 当前选中页发生改变时返回值
    handlePageCurrentChange(v) {
      this.pageing.pageNum = v
      this.getList()
    },
    // checkbox 当选择项发生变化时会触发该事件
    handleSelectionChange(v) {
      this.selected = v
    },
    // 查询搜索
    onSearch(queryParms) {
      this.pageing = {
        pageSize: 10,
        pageNum: 1,
      }
      this.queryForm = queryParms
      this.getList()
    },
    // 点击添加
    handleAdd() {
      this.$refs.add.show({
        type: 'add',
        data: {},
        title: '新增',
      })
      this.action = 'add'
    },
    // 批量删除
    handleDeleteAll() {
      if (!this.selected.length) {
        this.$message.error('请选择删除项')
        return
      }
      this.$confirm('确定执行删除操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const ids = this.selected.map((item) => item.id)
          this.batchDel(ids)
        })
        .catch(() => {})
    },
    // 删除
    handleDelete(params) {
      this.$confirm('确定执行删除操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.del(this.tableData[params.$index].id)
        })
        .catch(() => {})
    },
    // 编辑
    handleEdit(params) {
      this.action = 'edit'
      this.getDeatil(params.row.id)
    },
    // 保存
    async save(sendData) {
      const { code } = await bankInfoApi.save(sendData)
      if (code == 0) {
        this.$refs.add.closeDialog()
        this.$message({
          message: '新增成功',
          type: 'success',
        })
        this.getList()
      }
    },
    async batchDel(ids) {
      this.delBtnLoading = true
      const { code } = await bankInfoApi.batchDel(ids)
      if (code == 0) {
        this.$message({
          message: '删除成功',
          type: 'success',
        })
        this.getList()
        this.delBtnLoading = false
      }
    },
    async del(id) {
      const { code } = await bankInfoApi.batchDel([id])
      if (code == 0) {
        this.$message({
          message: '删除成功',
          type: 'success',
        })
        this.getList()
      }
    },
    // 添加或修改返回数据
    appendData(data) {
      if (this.action == 'add') {
        this.save(data)
      } else {
        this.update(data)
      }
    },
    async update(sendData) {
      const { code } = await bankInfoApi.update(sendData)
      if (code == 0) {
        this.$refs.add.closeDialog()
        this.$message({
          message: '修改成功',
          type: 'success',
        })
        this.getList()
      }
    },
    openDetail(data) {
      this.$refs.add.show({
        type: 'view',
        data: data,
        title: '查看',
      })
      this.action = 'view'
    },
    // 获取详情
    async getDeatil(id) {
      const { data } = await bankInfoApi.getDetail(id)
      this.$refs.add.show({
        type: 'edit',
        data: data,
        title: '修改',
      })
      this.action = 'edit'
    },
  },
}
</script>
<style scoped lang="scss">
.scmsa-table-page {
  height: calc(100% - 112px);
}
.top-btns-area {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  .left-btns {
    display: flex;
  }
  .right-btns {
    flex-grow: 1;
    margin-left: 8px;
    text-align: right;
    > .btns-area {
      display: flex;
    }
  }
}
</style>
